<template>
  <div>
    <h1>computed和watch函数</h1>
    <ul>
      <li>{{ list }}</li>
      <li>{{ newList }}</li>
      <li>
        <button @click="list.push(Math.random() * 100 + 1)">修改list</button>
      </li>
      <li>{{ count }}, {{ obj }}</li>
      <li>
        <button @click="change">修改count</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import { computed, ref, watch } from 'vue'
export default {
  setup () {
    /**
     * computed 函数 =》计算某个变量得到一个新变量=》渲染
     * 语法：computed(callback)
     */
    const count = ref(0)
    const obj = ref({
      name: '小红',
      age: 18
    })
    const list = ref([2, 3, 6, 8])
    // 需求：得到list中大于3的数组
    const newList = computed(() => {
      // list发生变化，就会重新执行我
      return list.value.filter(item => item > 3)
    })
    /**
     * watch 函数 =》监听某个变量变化了 =》干事儿
     * 语法：watch([监听变量1,监听变量2...], callback, options)
     */
    watch([count, obj], (newVal, oldVal) => {
      console.log('变量变化了：', newVal)
    }, {
      deep: true,
      immediate: true
    })
    const change = () => {
      // count.value++
      obj.value.age = 20
    }
    return { list, newList, count, change, obj }
  }
}
</script>

<style lang="scss" scoped>
</style>
